<template>
  <div class="modal-overlay" @click.self="$emit('close')">
    <div class="modal-content">
      <div class="modal-header">
        <h3>巡逻详情</h3>
        <button class="close-btn" @click="$emit('close')">×</button>
      </div>
      <div class="modal-body">
        <div class="detail-grid">
          <div class="detail-item">
            <span class="label">警员:</span>
            <span class="value">{{ patrol.officerNames.join(', ') }}</span>
          </div>
          <div class="detail-item">
            <span class="label">区域:</span>
            <span class="value">{{ patrol.location }}</span>
          </div>
          <div class="detail-item">
            <span class="label">状态:</span>
            <span :class="['status-badge', `status-${patrol.status || '未知'}`]">{{ patrol.status || '未知' }}</span>
          </div>
          <div class="detail-item">
            <span class="label">巡逻路线:</span>
            <span class="value">{{ patrol.route }}</span>
          </div>
          <div class="detail-item full-width">
            <span class="label">开始时间:</span>
            <span class="value">{{ `${patrol.date} ${patrol.startTime}` }}</span>
          </div>
          <div class="detail-item full-width">
            <span class="label">结束时间:</span>
            <span class="value">{{ `${patrol.date} ${patrol.endTime}` }}</span>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" @click="$emit('close')">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

// 定义巡逻记录的接口
interface PatrolRecord {
  shiftId: string;
  officerNames: string[];
  location: string;
  status: string;
  date: string;
  startTime: string;
  endTime: string;
  route: string;
}

defineProps<{
  patrol: PatrolRecord;
}>();
</script>

<style scoped>
@import "@/assets/styles/views/dashboard/PatrolDetailModal.css";
/* 新增的状态样式 */
.status-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}

.status-未开始 {
  background-color: #f0ad4e;
  color: #fff;
}

.status-进行中 {
  background-color: #5bc0de;
  color: #fff;
}

.status-已完成 {
  background-color: #5cb85c;
  color: #fff;
}

.status-未知 {
  background-color: #777;
  color: #fff;
}
</style>

